<template>
	<view class="P">
		<!-- 顶部轮播图 -->
		<view class="carousel">
			<swiper indicator-dots autoplay="true" circular=true duration="400" interval="5000">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					
						<image :src="item" class="loaded" mode="aspectFill"></image>
					
				</swiper-item>
			</swiper>
		</view>
		<view class="productInfo">
			<text class="info1">{{productInfo.title}}</text>
			<text class="info2">¥{{productInfo.price}}</text>
			<text class="info3">运费：{{productInfo.yunfei}}</text>
		</view>

		<!-- 分隔线 -->
		<view class="splid"></view>

		<!-- 详情和评价 分段器 -->
		<view class="detail">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text"></uni-segmented-control>
			<view class="content">
				<view class="fuwenben" v-show="current === 0">
					<!-- 富文本内容 -->
					<u-parse className="fuwenbenCont" :content="productInfo.article" />
				</view>
				<view v-show="current === 1">
					<!-- 评价列表 -->
					<view class="eva-box" v-for="item of hotpjList">
						<view class="uni-media-list-text-top">
							<text class="name">{{item.nicheng}}</text>
							<text class="right">{{item.time}}</text>
						</view>
						<view class="uni-media-list-body">
							<!-- <text>{{item.context.length>10?item.context.slice(0,10):item.context}}</text> -->
							<text>{{item.context}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部操作栏占位 -->
			<view class="splid2"></view>
		</view>

		<!-- 底部操作 -->
		<view class="page-bottom">
			<navigator url="/pages/home/home" open-type="switchTab" class="p-b-btn">
				<view class="uni-icon uni-icon-home"> </view>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<view class="uni-icon uni-icon-download"> </view>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn" @click="share">
				<view class="uni-icon uni-icon-redo"> </view>
				<text>分享</text>
			</view>
			<view class="action-btn-group">
				<button class=" action-btn no-border add-cart-btn">加入购物车</button>
				<button class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
			</view>
		</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="380"
			:shareList="shareList">
			</share>
	</view>
</template>

<script>
	// 分段器
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue";
	// 富文本
	import uParse from '@/components/un-parse/u-parse.vue';
	// 分享
	import share from '@/components/share';
	// 商品富文本
	var html =
		`
		<p>很多资讯页面，服务端返回的数据都是 markdown 字符串或 html 字符串，使用本模板可直接解析 html 为符合 uni-app 规范的富文本界面。下文为示例：</p>
		<p>HBuilderX堪称markdown书写编辑的最佳工具，本文简单介绍HBuilderX里markdown的使用技巧。更多详情请在HBuilderX里点菜单帮助-markdown语法帮助。</p>
		<p>markdown的标题是行首以#号开头，空格分割的，不同级别的标题，在HX里着色也不同。如下：</p>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<p>HBuilderX标题编辑技巧：</p>
		<ol>
		<li>Emmet快速输入：敲h2+Tab即可生成二级标题【同HTML里的emmet写法，不止标题，HX里所有可对应tag的markdown语法均支持emmet写法】。仅行首生效</li>
		<li>智能双击：双击#号可选中整个标题段落</li>
		<li>智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动在下一行补#</li>
		<li>回车后再次按Tab可递进一层标题，再按Tab切换列表符</li>
		<li>在# 后回车，可上插一个空标题行【同word】，任意位置按Ctrl+Shift+Enter也可以</li>
		</ol>
		<ul>
		<li>折叠：点标题前的-号可折叠该标题段落，快捷键是Alt+-（展开折叠是Alt+=）</li>
		<li>折叠：多层折叠时折叠或展开子节点，快捷键是Alt+Shift+-或=</li>
		</ul>
		<p><strong>加粗</strong> 【快捷键：Ctrl+B，支持多光标；Emmet：b后敲Tab】</p>
		<p><em>倾斜</em>【Emmet：i后敲Tab；前后包围：选中文字按Ctrl+\是在选区两侧添加光标，可以继续输入_】</p>
		<p><del>删除线</del>【前后包围：选中文字按Ctrl+\是在选区两侧添加光标，可以继续输入~~，会在2侧同时输入】</p>
		<blockquote>
		<p>引用</p>
		</blockquote>
		<p><a href="https://dcloud.io">超链接</a></p>
		<p><img src="https://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png" alt="logo"></p>
		<p>=======================</p>
		<pre><code class="language-javascript">    var a = document; //代码</code></pre>
		    `
	export default {
		components: {
			uniSegmentedControl,
			uParse,
			share
		},
		data() {
			return {
				favorite: true,
				productInfo: {},
				items: ['商品详情', '商品评价'],
				current: 0,
				imgList: [
					'/static/img/goods5.jpg',
					'/static/img/goods003.jpg',
					'/static/img/goods004.jpg'
				],
				shareList: [],
				hotpjList: [],
				shareList:[{
					type: 1,
					icon: '/static/icon/share_wechat.png',
					text: '微信好友'
					},
					{
						type: 2,
						icon: '/static/icon/share_moment.png',
						text: '朋友圈'
					},
					{
						type: 3,
						icon: '/static/icon/share_qq.png',
						text: 'QQ好友'
					},
					{
						type: 4,
						icon: '/static/icon/share_qqzone.png',
						text: 'QQ空间'
					}
				]
			};
		},
		async onLoad(options) {
			//接收传值,id里面放的是标题，因为测试数据并没写id 
			let id = options.id;
			if (id) {
				this.$api.msg(`点击商品ID:${id}`);
				this.productInfo = {
					title: '江小白 生肖纪念版 猪柿如意套装 40度 500ml*2 礼盒装',
					price: '216',
					yunfei: '包邮',
					article: html
				}
			}
			let hotpjList = await this.$api.json('hotpj');
			this.hotpjList = hotpjList || [];
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			buy(){
				// uni.navigateTo({
				// 	url: `/pages/order/createOrder`
				// })
			},
			share(){
				this.$refs.share.toggleMask();	
			},
		}

	}
</script>

<style lang="scss">
	.carousel {
		height: 600upx;
		position: relative;

		swiper {
			height: 100%;
		}
	
		.swiper-item {
			
			display: flex;
			justify-content: center;
			image {
				height: 100%;
			}
		}
	}

	.productInfo {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx 20upx 30upx;
	}

	.info2 {
		color: $uni-text-color-active;
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	.info3 {
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm;
		border-top: #E4E7ED solid 2upx;
	}

	.splid {
		height: 20upx;
		background-color: $uni-bg-color-hui;
	}
	.splid2 {
		height: 100upx;
	}

	.detail {
		display: flex;
		flex-direction: column;
	}

	.eva-box {
		margin: 20upx;
		border-bottom: #C0C4CC solid 2upx;
		image {
			width: 100upx;
			height: 100upx;
			border-radius: 30upx;
		}

		.uni-media-list-text-top {
			display: flex;
			justify-content: space-between;

			.right {
				font-size: 25upx;
				color: $uni-text-color-grey;
			}
		}
	}

	.fuwenben {
		display: flex;
		width: 750UPX;
		.fuwenbenCont{
			width: 720upx;
			flex-basis:720upx;
			flex: 1;
			padding: 28upx;
			padding-right: 30upx;
		}
	}

	.page-bottom{
		position:fixed;
		bottom:0upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: 750upx;
		height: 100upx;
		box-shadow: 0 0 10upx 0 rgba(0,0,0,.5);
		
		.p-b-btn{
			flex-grow: 1;
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
			background-color: white;
			width: 96upx;
			border-right: #C0C4CC solid 2upx;
			
		}
		.action-btn-group{
			flex-grow: 3;
			display: flex;
			overflow: hidden;
			position:relative;
			
			.action-btn{
				display:flex;
				border-radius: 0upx;
				flex-grow: 1;
				align-items: center;
				justify-content: center;
				height: 100%;
				font-size: $uni-font-size-base;
				padding: 0;
			}
			
			.buy-now-btn{
				background-color: #6495ED;
			}
			.add-cart-btn{
				background-color: #FF8247;
			}
		}
	}
	
	
</style>
